(function () {
    let template = function (self) {
        return `<aux-view class="aux-date"></aux-view>`;
    };

    function handleNewValue(self, newval) {
        let $value = "";
        if (!newval) {
            return;
        }
        if (typeof newval == "object" && newval instanceof Date) {
            $value = newval;
        } else {
            $value = new Date(parseFloat(newval));
        }
        self.$value = $value;
    }

    function setContent(self) {
        if (!self.$format) {
            self.$ele.root.textContent = self.$value.toLocaleString();
        } else {
            self.$ele.root.textContent = self.$value.auiFormat(self.$format);
        }
    }

    document.auiDefineElement("aux-date", {
        template,
        props: {
            "value": {
                afterCreated(self, newval) {
                },
                observer(self, oldval, newval) {
                    handleNewValue(self, newval);
                    setContent(self)
                },
                observerProp: function(self) {
                    return {
                        get() {
                            return self.$value
                        },
                        set(newval) {
                            handleNewValue(self, newval);
                            setContent(self)
                        }
                    }
                }
            },
            "format": {
                afterCreated(self, newval) {
                    self.$format = newval;
                    handleNewValue(self, self.auiGetAttribute("value"));
                    setContent(self)
                },
                observer(self, oldval, newval) {
                    self.$format = newval;
                    setContent(self)
                }
            }
        },
        created(self) {
            self.$ele.root = self.children[0];
            self.$value = new Date();
        }
    });
})();